<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="my h100p">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" :border="false">
        <block slot="left">
          <view class="flr navbar" :style="navLeftStyle">
            <view class="flca h100p headphonesBox">
              <image src="/static/img/my/kf.png" mode="scaleToFill" class="headphones" />
            </view>
            <view class="cWH flcv w300">客服</view>
          </view>
        </block>
      </uni-nav-bar>
    </view>
    <view :style="globalData.appStyle.contentStyle">
      <view v-if="globalData.userInfo.phoneNumber" class="cardContentAllInfo w100p flc">
        <image src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/4cb29935cabf4947b8f7f01c6789dcb9e.jfif" mode="scaleToFill" class="userInfoImg w100p h100p" />
        <view class="z100">
          <view class="w100p flr">
            <image v-if="globalData.userInfo.avatarUrl" :src="globalData.userInfo.avatarUrl" mode="scaleToFill" class="avatar mr16" @click="userInfoClick" />
            <image v-else src="/static/img/global/avatar.png" mode="scaleToFill" class="avatar mr16" @click="userInfoClick" />
            <view class="flc cardInfo">
              <view class="flr h20">
                <view v-if="globalData.userInfo.nickName" class="cWH f20 l1" @click="userInfoClick">{{ globalData.userInfo.nickName }}</view>
                <view v-else class="cWH f20 l1" @click="userInfoClick">*先生</view>
                <uni-icons type="right" size="20" color="white" />
              </view>
              <view class="flb h20 mt20">
                <view class="flr h20">
                  <uni-rate :value="globalData.userInfo.score" class="mr12" size="20" @change="onChange" />
                  <view class="cWH f14 l20">{{ Number(globalData.userInfo.score).toFixed(1) }}分</view>
                </view>
                <view class="flr" @click="btnClick('/pages/my/attention', 1)">
                  <view class="cWH f16 l20 mr6">关注订阅</view>
                  <uni-icons type="plus" size="20" color="white" />
                </view>
              </view>
            </view>
          </view>
          <view v-if="hasAuth" class="tagList flr mt20">
            <view class="tag" v-if="globalData.userInfo.isPartner === '1'">合伙人</view>
            <view class="tag" v-if="globalData.userInfo.isEnterpriseCertification === '1'">企业认证</view>
            <view class="tag" v-if="globalData.userInfo.isRealName === '1'">已实名</view>
          </view>
        </view>
      </view>
      <view v-else class="cardContentNeedInfo w100p flc">
        <image src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/4cb29935cabf4947b8f7f01c6789dcb9e.jfif" mode="scaleToFill" class="userInfoImg w100p h100p" />
        <view class="z100 w100p flr">
          <image src="/static/img/global/avatar.png" mode="scaleToFill" class="avatar mr16" @click="userInfoClick" />
          <view class="flc cardInfo">
            <view class="flr h20">
              <view class="cWH f20 l1" @click="userInfoClick">未登录</view>
            </view>
            <view class="fle h20 mt20">
              <view class="flr">
                <view class="cWH f16 l20 mr6">关注订阅</view>
                <uni-icons type="plus" size="20" color="white" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <scroll-view :class="[isAllInfo ? 'cardListAllInfo' : 'cardListNeedInfo']" scroll-y>
        <view class="flb card1">
          <view class="flc">
            <view class="tc cYE f16 cardNum">{{ globalData.userInfo.checkQty || 0 }}</view>
            <view class="cGY1 f14 cardLabel tc">浏览量</view>
          </view>
          <view class="flc">
            <view class="tc cYE f16 cardNum">{{ globalData.userInfo.pointsBalance || 0 }}</view>
            <view class="cGY1 f14 cardLabel tc">积分</view>
          </view>
          <view class="flc">
            <view class="tc cYE f16 cardNum">{{ globalData.userInfo.cardsBalance || 0 }}</view>
            <view class="cGY1 f14 cardLabel tc">套卡次数</view>
          </view>
          <view class="flc">
            <view class="tc cYE f16 cardNum">{{ globalData.userInfo.contactQty || 0 }}</view>
            <view class="cGY1 f14 cardLabel tc">联系记录</view>
          </view>
        </view>
        <view class="flc card">
          <view class="title">需求服务</view>
          <view class="flb">
            <view class="flc w25p" @click="btnClick('/pages/procurement/myProcurement', 1)">
              <view class="flca">
                <image src="/static/img/my/x1.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">采购需求</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/procurement/add/index', 1)">
              <view class="flca">
                <image src="/static/img/my/x2.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">采购发布</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/x3.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">邀约入驻</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/x4.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">分享点赞</view>
            </view>
          </view>
          <view class="flb mt16">
            <view class="flc w25p" @click="btnClick('/pages/sale/mySale', 1)">
              <view class="flca">
                <image src="/static/img/my/x5.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">销售需求</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/sale/add/index', 1)">
              <view class="flca">
                <image src="/static/img/my/x6.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">发布销售</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/contactList/index', 1)">
              <view class="flca">
                <image src="/static/img/my/x7.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">联系记录</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/attention', 1)">
              <view class="flca">
                <image src="/static/img/my/x8.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">关注订阅</view>
            </view>
          </view>
        </view>
        <view class="flc card">
          <view class="title">积分服务</view>
          <view class="flb">
            <view class="flc w25p" @click="btnClick('/pages/my/pay', 1)">
              <view class="flca">
                <image src="/static/img/my/j1.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">充值/提现</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/point', 1)">
              <view class="flca">
                <image src="/static/img/my/j2.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">积分记录</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/cardsBalance', 1)">
              <view class="flca">
                <image src="/static/img/my/j3.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">次卡套餐</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/j4.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">赚积分</view>
            </view>
          </view>
          <view class="flr mt16 w100p">
            <view class="flc w25p" @click="btnClick('/pages/my/payList', 1)">
              <view class="flca">
                <image src="/static/img/my/j5.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">支付订单</view>
            </view>
            <view class="flc w25p" @click="callPhone">
              <view class="flca">
                <image src="/static/img/my/j6.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">联系客服</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/j7.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">举报中心</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/j8.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">账户设置</view>
            </view>
          </view>
        </view>
        <view class="flc card">
          <view class="title">账户信息</view>
          <view class="flb">
            <view class="flc w25p" @click="btnClick('/pages/my/realAuth', 1)">
              <view class="flca">
                <image src="/static/img/my/z1.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">实名认证</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/enhanceInfo', 1)">
              <view class="flca">
                <image src="/static/img/my/z2.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">完善信息</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/partner', 1)">
              <view class="flca">
                <image src="/static/img/my/z3.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">成为合伙人</view>
            </view>
            <view class="flc w25p" @click="btnClick('/pages/my/safePhoneNumber', 1)">
              <view class="flca">
                <image src="/static/img/my/z4.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">安全号设置</view>
            </view>
          </view>
          <view class="flb mt16">
            <view class="flc w25p" @click="btnClick('/pages/my/viewList', 1)">
              <view class="flca">
                <image src="/static/img/my/z5.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">浏览记录</view>
            </view>
            <view class="flc w25p" @click="navToList('/pages/my/contactList/index?curIdx=2')">
              <view class="flca">
                <image src="/static/img/my/z6.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">收藏记录</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/z7.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">消息</view>
            </view>
            <view class="flc w25p" @click="btnClick('', 2)">
              <view class="flca">
                <image src="/static/img/my/z8.png" mode="scaleToFill" class="img" />
              </view>
              <view class="cGY2 f12 mt4 tc">帮助与反馈</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
export default {
  mixins: [commonMxins],
  data() {
    return {
      rateValue: 3,
      navLeftStyle: '',
      hasAuth: false,
      isAllInfo: false //false展示矮的头部true展示高的头部，没授权手机号是false，合伙人/企业认证/已实名一个都没有也是false，其它为true
    };
  },
  async onLoad() {
    //不知为啥高度会少2个像素，可能是nav-bar组件盒子模型没有减去边框，所以这里padding要减去1，下面navbar的样式top得给2
    this.navLeftStyle = `height:${this.globalData.navBarInfo.height}rem;padding:${this.globalData.navBarInfo.paddingTop - 1}rem 0;width:${200}rem;`;
  },
  async onShow() {
    await this.appInit();
    await this.getUserInfo();
    const { isRealName, isPartner, isEnterpriseCertification } = this.globalData.userInfo;
    this.hasAuth = isRealName === '1' || isPartner === '1' || isEnterpriseCertification === '1';
    this.isAllInfo = this.hasAuth;
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/myPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/myPage' };
    },
    userInfoClick() {
      if (this.globalData.loginInfo.status === '2') {
        uni.showToast({ title: this.globalData.loginInfo.tip, icon: 'none', duration: 2000 });
      } else if (this.globalData.userInfo.phoneNumber) {
        uni.navigateTo({ url: `/pages/my/userInfo` });
      } else {
        uni.navigateTo({ url: `/pages/global/authorizePhone?type=init` });
      }
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.globalData.platformInfo.CUSTOMER_SERVICE_TEL,
        success: res => {
          console.log('调用成功!');
        },
        fail: res => {
          uni.showToast({ title: '无法调起拨号', icon: 'none', duration: 2000 });
        }
      });
    },
    navToList(url) {
      if (this.globalData.loginInfo.status === '2') {
        uni.showToast({ title: this.globalData.loginInfo.tip, icon: 'none', duration: 2000 });
      } else if (!this.globalData.userInfo.phoneNumber) {
        uni.showToast({ title: '请先登录授权手机号', icon: 'none', duration: 2000 });
      } else {
        uni.navigateTo({ url });
      }
    },
    btnClick(url, type = 0, data = {}) {
      if (type === 2) {
        uni.showToast({ title: '敬请期待', icon: 'none', duration: 2000 });
      } else if (type === 1) {
        if (this.globalData.loginInfo.status === '2') {
          uni.showToast({ title: this.globalData.loginInfo.tip, icon: 'none', duration: 2000 });
        } else if (!this.globalData.userInfo.phoneNumber) {
          uni.showToast({ title: '请先登录授权手机号', icon: 'none', duration: 2000 });
        } else {
          uni.navigateTo({ url });
        }
      } else {
        uni.navigateTo({ url });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.my {
  background: rgba(242, 242, 242, 1);
  .navbar {
    position: absolute;
    top: 2rem;
    left: 0;
    box-sizing: border-box;
    .headphonesBox {
      margin: 0 6rem 0 30rem;
      .headphones {
        width: 20rem;
        height: 20rem;
      }
    }
  }
  .cardContentAllInfo {
    padding: 14rem 24rem;
    box-sizing: border-box;
    position: relative;
    .avatar {
      width: 60rem;
      height: 60rem;
      border-radius: 5rem;
    }
    .cardInfo {
      width: calc(100% - 72rem);
    }
    .tag {
      padding: 4rem 12rem;
      box-sizing: border-box;
      background: #ffb46e;
      border-radius: 3rem;
      margin-right: 4rem;
      font-size: 12rem;
      line-height: 16rem;
      color: white;
    }
  }
  .cardContentNeedInfo {
    padding: 14rem 24rem;
    box-sizing: border-box;
    position: relative;
    .avatar {
      width: 60rem;
      height: 60rem;
      border-radius: 5rem;
    }
  }
  .userInfoImg {
    position: absolute;
    top: 0;
    left: 0;
  }
  .cardListAllInfo {
    height: calc(100% - 132rem);
  }
  .cardListNeedInfo {
    height: calc(100% - 88rem);
  }
  .cardListAllInfo,
  .cardListNeedInfo {
    padding: 13rem 14rem;
    box-sizing: border-box;
    .card1,
    .card {
      background: #ffffff;
      border-radius: 5rem;
      padding: 10rem 24rem;
      box-sizing: border-box;
      .cardNum {
        height: 26rem;
        line-height: 26rem;
      }
      .cardLabel {
        height: 22rem;
        line-height: 22rem;
      }
      .title {
        color: #383838;
        font-size: 16rem;
        padding: 0rem 16rem 20rem 16rem;
        box-sizing: border-box;
        height: 36rem;
        line-height: 16rem;
      }
      .img {
        width: 24rem;
        height: 24rem;
      }
    }
    .card {
      padding: 12rem 0;
      margin-top: 14rem;
    }
  }
  /deep/ .uni-card {
    padding: 0 !important;
    &__header {
      color: #383838;
      font-size: 14rem;
      border: none;
    }
    &__header-content-title {
      color: rgba(56, 56, 56, 1);
    }
    &__content {
      padding: 10rem 0 !important;
    }
  }
}
</style>
